<template>
  <view class="outbound-detail">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">出库单详情</block>
    </cu-custom>

    <view v-if="loading" class="loading-container">
      <view class="cu-load loading"></view>
      <text>加载中...</text>
    </view>

    <view v-else-if="outboundDetail" class="detail-container">
      <!-- 基本信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">基本信息</text>
          <view class="status-tag" :class="statusClass">
            {{ statusText }}
          </view>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">出库单号:</text>
            <text class="value">{{ outboundDetail.outboundNo }}</text>
          </view>
          <view class="info-row">
            <text class="label">订单号:</text>
            <text class="value">{{ outboundDetail.orderNo }}</text>
          </view>
          <view class="info-row">
            <text class="label">客户名称:</text>
            <text class="value">{{ outboundDetail.customerName || "-" }}</text>
          </view>
          <view class="info-row">
            <text class="label">项目名称:</text>
            <text class="value">{{ outboundDetail.projectName || "-" }}</text>
          </view>
          <view class="info-row">
            <text class="label">出库数量:</text>
            <text class="value">{{ outboundDetail.totalQuantity || 0 }}套</text>
          </view>
          <view class="info-row">
            <text class="label">创建时间:</text>
            <text class="value">{{
              formatTime(outboundDetail.createTime)
            }}</text>
          </view>
          <view v-if="outboundDetail.remark" class="info-row">
            <text class="label">备注:</text>
            <text class="value">{{ outboundDetail.remark }}</text>
          </view>
        </view>
      </view>

      <!-- 出库明细 -->
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">出库明细</text>
          <text class="detail-count">共{{ detailList.length }}项</text>
        </view>
        <view class="detail-list">
          <view
            v-for="(item, index) in detailList"
            :key="index"
            class="detail-item"
          >
            <view class="item-header">
              <view class="window-info">
                {{ item.windowNo || `明细${index + 1}` }}
              </view>
              <view class="quantity">{{ item.quantity }}套</view>
            </view>
            <view class="item-content">
              <view class="detail-row">
                <text class="detail-label">门窗编号:</text>
                <text class="detail-value">{{ item.windowNo || "-" }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">门窗系列:</text>
                <text class="detail-value">{{ item.windowSeries || "-" }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">门窗颜色:</text>
                <text class="detail-value">{{ item.windowColor || "-" }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">计划数量:</text>
                <text class="detail-value">{{ item.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-section">
        <button
          v-if="outboundDetail.status == 1"
          class="cu-btn bg-green lg block"
          @click="executeOutbound"
        >
          执行出库
        </button>
      </view>
    </view>

    <view v-else class="error-container">
      <view class="error-icon">⚠️</view>
      <text class="error-text">出库单不存在或已被删除</text>
      <button class="cu-btn bg-blue sm" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
import {
  getOutboundDetail,
  getOutboundDetailList,
  executeOutbound,
} from "../../../api/wms/finishedGoodsOutbound.js";

export default {
  name: "OutboundDetail",
  data() {
    return {
      loading: false,
      outboundId: "",
      outboundDetail: null,
      detailList: [],
    };
  },
  onShow() {
    // 监听出库执行完成事件，刷新页面数据
    uni.$on("outboundExecuted", this.refreshData);
  },
  onHide() {
    // 移除事件监听
    uni.$off("outboundExecuted", this.refreshData);
  },
  computed: {
    statusClass() {
      if (!this.outboundDetail) return "status-pending";

      const statusMap = {
        0: "status-pending",
        1: "status-approved",
        2: "status-partial",
        3: "status-completed",
        4: "status-rejected",
      };
      return statusMap[this.outboundDetail.status] || "status-pending";
    },

    statusText() {
      if (!this.outboundDetail) return "待审核";

      const statusMap = {
        0: "待审核",
        1: "已审核",
        2: "部分出库",
        3: "已出库",
        4: "已驳回",
      };
      return statusMap[this.outboundDetail.status] || "待审核";
    },
  },
  onLoad(options) {
    if (options.id) {
      this.outboundId = options.id;
      this.loadData();
    } else {
      uni.showToast({
        title: "参数错误",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true;
      try {
        // 并行加载出库单基本信息和明细列表
        const [detailResponse, detailListResponse] = await Promise.all([
          getOutboundDetail(this.outboundId),
          getOutboundDetailList(this.outboundId),
        ]);

        if (detailResponse.data.success) {
          this.outboundDetail = detailResponse.data.result;
        }

        if (detailListResponse.data.success) {
          this.detailList = detailListResponse.data.result || [];
        }
      } catch (error) {
        console.error("加载数据失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        this.loading = false;
      }
    },

    // 刷新数据
    refreshData() {
      this.loadData();
    },

    // 执行出库
    executeOutbound() {
      // 跳转到出库执行页面
      uni.navigateTo({
        url: `/pages/wms/product/outbound-execute?id=${this.outboundId}`,
      });
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return "-";

      const date = new Date(timeStr);
      const now = new Date();
      const diff = now - date;

      // 7天内显示相对时间
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        if (diff < 60 * 1000) {
          return "刚刚";
        } else if (diff < 60 * 60 * 1000) {
          return Math.floor(diff / (60 * 1000)) + "分钟前";
        } else if (diff < 24 * 60 * 60 * 1000) {
          return Math.floor(diff / (60 * 60 * 1000)) + "小时前";
        } else {
          return Math.floor(diff / (24 * 60 * 60 * 1000)) + "天前";
        }
      } else {
        // 超过7天显示具体日期
        return (
          date.getFullYear() +
          "-" +
          String(date.getMonth() + 1).padStart(2, "0") +
          "-" +
          String(date.getDate()).padStart(2, "0") +
          " " +
          String(date.getHours()).padStart(2, "0") +
          ":" +
          String(date.getMinutes()).padStart(2, "0")
        );
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.outbound-detail {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  text {
    margin-top: 20rpx;
    color: #666;
    font-size: 28rpx;
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  padding: 40rpx;

  .error-icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }

  .error-text {
    color: #999;
    font-size: 28rpx;
    margin-bottom: 40rpx;
    text-align: center;
  }
}

.detail-container {
  padding: 20rpx;
}

.info-card,
.detail-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 2rpx solid #f8f9fa;
    background-color: #fafbfc;

    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .status-tag {
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #fff;

      &.status-pending {
        background-color: #ff9500;
      }

      &.status-approved {
        background-color: #34c759;
      }

      &.status-partial {
        background-color: #007aff;
      }

      &.status-completed {
        background-color: #28a745;
      }

      &.status-rejected {
        background-color: #ff3b30;
      }
    }

    .detail-count {
      font-size: 26rpx;
      color: #666;
    }
  }

  .card-content {
    padding: 30rpx;

    .info-row {
      display: flex;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
      }
    }
  }
}

.detail-list {
  .detail-item {
    border-bottom: 2rpx solid #f8f9fa;

    &:last-child {
      border-bottom: none;
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 30rpx 16rpx;
      background-color: #f8f9fa;

      .window-info {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }

      .quantity {
        font-size: 28rpx;
        color: #007aff;
        font-weight: 600;
      }
    }

    .item-content {
      padding: 20rpx 30rpx 24rpx;

      .detail-row {
        display: flex;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          width: 140rpx;
          font-size: 26rpx;
          color: #666;
          flex-shrink: 0;
        }

        .detail-value {
          flex: 1;
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }
}

.action-section {
  padding: 40rpx 20rpx;

  .cu-btn {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    border-radius: 12rpx;
  }
}
</style>
